<template>
  <!-- 修改资料 -->
  <div>
    <!-- 内容主题区域 -->
    <el-form
      label-width="110px"
      :model="form"
      label-position="right"
      ref="formRef"
      :rules="formRules"
      class="borderNone"
      disabled
    >
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="模块服务Id" prop="moduleId">
            <el-input v-model="form.moduleId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="模块目录">
            <el-input v-model="form.catalogName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="JSON配置文件" prop="moduleConfigFile">
            <el-input v-model="form.moduleConfigFile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="配置文件目录" prop="configPath">
            <el-input v-model="form.configPath"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="服务类" prop="serivceClassName">
            <el-input v-model="form.serivceClassName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              size="large"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
              active-value="normal"
              inactive-value="disable"
            />
          </el-form-item>
        </el-col>
        <el-form-item label="备注">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-row>
      <el-form-item label="上传附件">
        <el-image
          alt="上传图片"
          :src="form.fileFullPath"
          style="width: 30%"
        ></el-image>
      </el-form-item>
      <sc-title title="关联表"></sc-title>
      <sc-form-table
        v-model="dataList"
        disabled
        placeholder="暂无数据"
        height="400px"
      >
        <template #tableContent>
          <el-table-column prop="number" label="数据库表名"> </el-table-column>
          <el-table-column prop="name" label="表描述"> </el-table-column>
          <el-table-column prop="tableTypeName" label="表类型">
          </el-table-column>
        </template>
      </sc-form-table>
    </el-form>
    <sc-title style="padding-top: 20px" title="文件表"></sc-title>
    <sc-form-table
      v-model="fileList"
      placeholder="暂无数据"
      height="400px"
      @delete="deleteFile"
    >
      <template #tableContent>
        <el-table-column label="修改" width="58" fixed="left">
          <template #default="scope">
            <el-tag @click="toEditFile(scope.row)">
              <Edit style="width: 1em; height: 1em" />
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="文件名"> </el-table-column>
        <el-table-column prop="extension" label="扩展名"> </el-table-column>
        <el-table-column prop="lastModifiedTime" label="最后修改时间">
        </el-table-column>
        <el-table-column label="扩展名图标路径">
          <template #default="scope">
            <el-image
              style="width: 50px"
              alt="扩展名图标"
              :src="scope.row.extIconFilePath"
              fit="contain"
              @click="addImage(scope.row.extIconFilePath)"
              :preview-src-list="srcList"
              preview-teleported
            ></el-image>
          </template>
        </el-table-column>
      </template>
    </sc-form-table>

    <div class="button-position">
      <el-button @click="updateVisible">退 出</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElNotification, ElMessageBox } from "element-plus";
import { Check, Close, Edit, Fold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import Api from "@/api/model/meta";
import tool from "@/utils/tool";
const router = useRouter();
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});
// 添加用户数据的对象
const form = ref({});
const dataList = ref([]);
const fileList = ref([]);
const srcList = ref([]);
const formRef = ref();
const formRules = reactive({
  moduleId: [{ required: true, message: "请输入Id", trigger: "blur" }],
  number: [{ required: true, message: "请输入编号", trigger: "blur" }],
});

onMounted(() => {
  getInit();
});

const getInit = async () => {
  let formRes = await Api.module.detail.post(props.paramsData);
  if (formRes.code == 200) {
    form.value = formRes.data;
    dataList.value = formRes.dataList;
    fileList.value = formRes.fileList;
  }
};

const updateVisible = (val) => {
  emit("updatetable");
};

const addImage = (val) => {
  srcList.value.unshift(val);
};
const toEditFile = (val) => {
  console.log(val);
  let queryData = {
    id: form.value.id,
    fileName: val.label,
  };
  let item = {};
  switch (val.extension) {
    case "json":
    router.push({
        path:'/businessrule',
        query: queryData
    })
      break;
    case "md":
      item.url = "/meta/module/MdFileEditor";
      item.title = "修改md文件";
      tool.addHiddenRouter(item,queryData, router);
      break;
    case "xml":
      router.push({ path: "/reportXmlSetting", query: queryData });
  }
};
const deleteFile = (val) => {
  ElMessageBox.confirm("确定删除这条记录吗", "提示", {
    type: "warning",
    confirmButtonText: "确定",
    confirmButtonClass: "el-button--danger",
  })
    .then(async () => {
      let res = Api.pageTemplate.deleteFile({
        id: form.moduleId,
        fileName: val.label,
      });
      if (res.code == 200) {
        ElNotification.success({ message: "删除成功！", duration: 2000 });
      }
    })
    .catch(() => {
      fileList.value.splice(val.index, 0, val);
    });
};
</script>

<style lang="less" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
      inset;
    cursor: default;
    background-color: transparent; //背景颜色透明
    border-bottom: 1px solid #999;
    border-radius: 0;

    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>
